<template>
	<view>
		<view class="bditem">
			<view>单位名称</view>
			<view>{{qys.qy_name}}</view>
		</view>
		<view class="bditem">
			<view>所属区镇</view>
			<view>{{qys.qy_tongxun}}</view>
		</view>
		<view class="bditem">
			<view>行业类别（大类）</view>
			<view>{{qys.qy_leibieda}}</view>
		</view>
		<view class="bditem">
			<view>用水管理人员</view>
			<view>{{qys.nys_tianbiaoren}}</view>
		</view>
		<view class="bditem">
			<view>联系电话</view>
			<view>{{qys.qy_gtel}}</view>
		</view>
		<view class="bditem">
			<view>用水年度</view>
			<view>2022</view>
		</view>
		<qiun-title-bar title="多坐标系混合图"/>
		<view class="charts-box" style="height: 400px;">
		  <qiun-data-charts type="mix" :opts="{yAxis:{data:[{position: 'left',title: '地表水',textAlign: 'left'},{position: 'right',title: '地下水',textAlign: 'left'},{position: 'right',title: '自来水',textAlign: 'left'}]}}" :chartData="Mix"/>
		</view>
	</view>
</template>

<script>
	import {reactive,toRefs,onMounted} from 'vue'
	import {useStore} from 'vuex'
	export default {
		setup(){
			const {state}=useStore();
			let data=reactive({
				qys:{},
				Mix:{}
			})
			onMounted(()=>{
				data.qys=state.slapp.qys
				data.Mix={
					categories: ["第一季度", "第二季度", "第三季度","第四季度"],
					series: [{
						name: "地表水",
				        index:2,
						data: [data.qys.nys_dbshengqing, data.qys.nys_dbtiaozheng, data.qys.nys_dbxiada,parseInt(data.qys.qy_leibiezhong/2)],
						color: "#ffff00",
						type: "column"
					}, {
						name: "地下水",
						data: [data.qys.nys_dxshengqing, data.qys.nys_dxtiaozheng, data.qys.nys_dxxiada,parseInt(data.qys.qy_leibiezhong/2)],
						type: "line",
						style: "curve",
						color: "#ee0000",
						disableLegend: true
					}, {
						name: "自来水",
						data: [data.qys.nys_zshengqing, data.qys.nys_ztiaozheng, data.qys.nys_zxiada,parseInt(data.qys.qy_leibiezhong/2)],
						type: "line",
						color: "#66ccff"
					}]
				}
			})
			return {...toRefs(data)}
		}
	}
</script>

<style lang="scss">
	.bditem {
		color: #666666;
		padding: 20rpx 30rpx;
		display: flex;
		border-bottom: 1px solid #E4E4E4;
		view {
			display: flex;
			align-items: center;
		}

		&>view:first-child{
			text-align: center;
			width: 130rpx;
			margin-right: 80rpx;
		}
		&>view:last-child{
			font-size: 30rpx;
		}
	}
</style>
